<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			 bo  d  y{
				height: 100%;
				height: 1000000px;
				background-image: url(img/蜡笔小新.png);
				background-size: contain;
				/* 函数 cover 等比例放大图片   特点：原图按照比例放大存背景空间
				     【开发者：背景图大小是否等于背景空间】
				      contain 等比例缩放图片  特点：图片按照比例缩放存背景空间
					  【开发者：背景图等比例显示在背景空间】
				 */
				/* 背景附件--尺寸中存在cover或者contain */
				background-attachment: fixed;/*背景图固定  scroll 不固定*/
			}   
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/蜡笔小新.png);
				/* 问题：超大图不显示  小图显示
				 1.注意 背景空间大小 如果图小于背景空间 平铺
				 */
				background-repeat: no repeat;
				/*no repeat不平铺 repeat-x，y 横，纵向平铺*/
				background-size: 30%;
				/* 背景尺寸属性：数值px % 函数 cover contain */
				/* 背景定位：前提背景空间大于背景图 关键字：center\left\right\top\bottom */
				background-position:center;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, dicta laudantium pariatur esse minus eius distinctio asperiores doloremque ab unde magnam, quo velit eaque aut sed voluptatem! Quia, quos enim.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae aut quaerat nisi iste a in, at illo id earum ab laborum voluptatum totam corrupti distinctio, ad expedita ea facere repellendus!
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam iusto architecto quis nulla a voluptates iste? Ratione similique molestiae enim facere, perspiciatis doloribus magnam consequuntur! Doloremque nulla dolores veniam quisquam.
		
		<!-- html img图片 引入一张图片 位置不可随意改变
		    css 背景图 引入一张图片  位置可以随意改变
			子属性 background-color 背景颜色
			      background-image 背景图
				  background-repeat 背景重复问题
				  background-size 背景尺寸
				  background-attachment 背景附件
				  background-position 背景定位
			复合属性 background background-image background-color  background-position
			  background-size background-repeat background-attachment
			  
			简写属性  background:background-image background-position/background-size background-repeat
			 替代子属性：background-image background-color background-repeat
		 -->
		 <div></div>
		 
	</body>
</html>